<template>
  <div class="wrapper">
    <div class="row">
      <div class="col col-100 header"></div>
    </div>
    <div class="row">
      <div class="col col-26">
        <div class="row">
          <div class="col col-100 col-content">
            <equipment-quantity
              :list="equipmentQuantityDatas"
              v-if="equipmentQuantityDatas"
            ></equipment-quantity>
          </div>
          <div class="col col-100 col-content">
            <left-bottom
              v-if="employeeDealDatas"
              :employeeDealCount="employeeDealDatas.employeeDealCount"
              :memberDealCount="employeeDealDatas.memberDealCount"
            ></left-bottom>
          </div>
        </div>
      </div>
      <div class="col col-44 col-content">
        <china-map :datas="chinaMapDatas" v-if="chinaMapDatas"></china-map>
      </div>
      <div class="col col-26">
        <div class="row">
          <div class="col col-100 col-content">
            <info-rank
              v-if="infoRankDatas"
              :pictureAccount="infoRankDatas.pictureAccount"
              :appAccount="infoRankDatas.appAccount"
              :videoAccount="infoRankDatas.videoAccount"
            ></info-rank>
          </div>
          <div class="col col-100 col-content">
            <equipment-rank
              v-if="equipmentRankDatas"
              :xList="equipmentRankDatas.xList"
              :equipmentCount="equipmentRankDatas.equipmentCount"
              :releaseCount="equipmentRankDatas.releaseCount"
            ></equipment-rank>
          </div>
          <div class="col col-100 col-content">
            <equipment-break-down
              v-if="equipmentBreakDownDatas"
              :data="equipmentBreakDownDatas"
            ></equipment-break-down>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EquipmentQuantity from "./components/equipmentQuantity.vue";
import ChinaMap from "./components/chinaMap.vue";
import LeftBottom from "./components/LeftBottom.vue";
import InfoRank from "./components/InfoRank.vue";
import EquipmentRank from "./components/EquipmentRank.vue";
import EquipmentBreakDown from "./components/equipmentBreakDown.vue";

import equipmentQuantityDatas from "./mock/equipmentQuantity";
import chinaMapDatas from "./mock/chinaMap";
import infoRankDatas from "./mock/infoRank";
import equipmentRankDatas from "./mock/equipmentRank";
import equipmentBreakDownDatas from "./mock/equipmentBreakDown";
import employeeDealDatas from "./mock/employeeDealDatas";
export default {
  name: "Display",
  components: {
    EquipmentQuantity,
    ChinaMap,
    LeftBottom,
    InfoRank,
    EquipmentRank,
    EquipmentBreakDown
  },
  mounted() {
    // 在这里请求完数据后进行赋值，数据格式看一下 mock文件下的数据格式
    // for example:
    /**
       request(url, params).then((res) => {
         根据组件需要的数据提取re中的数据，
         然后 this.chinaMapDatas = datas, 其他的数据一样 
       })
     */
    this.equipmentQuantityDatas = equipmentQuantityDatas;
    this.chinaMapDatas = chinaMapDatas;
    this.infoRankDatas = infoRankDatas;
    this.equipmentRankDatas = equipmentRankDatas;
    this.equipmentBreakDownDatas = equipmentBreakDownDatas;
    this.employeeDealDatas = employeeDealDatas;
  },
  data() {
    return {
      equipmentQuantityDatas: null,
      chinaMapDatas: null,
      infoRankDatas: null,
      equipmentRankDatas: null,
      equipmentBreakDownDatas: null,
      employeeDealDatas: null
    };
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  width: 100vw;
  height: 100vh;
  background-image: url("./assets/bg.jpg");
  background-size: 100% 100%;
  color: white;
  .row {
    width: 100%;
    .col {
      float: left;
    }
    .col-content {
      margin-bottom: 1.25vh;
      box-sizing: border-box;
    }
    .header {
      border: none;
      width: 100%;
      height: 7.5vh;
    }
    .col-26,
    .col-44 {
      margin-left: 0.37%;
      margin-right: 0.37%;
    }
    .col-26 {
      width: 26.66%;
    }
    .col-44 {
      width: 44.44%;
    }
    .col-100 {
      width: 100%;
    }
  }
}
</style>
